<template lang="html">
  <div class="search">
    <input @keyup.enter="keyupHandler" v-model="searchData" type="text" name="">
    <button @click="searchHandler">搜索</button>
    <ul>
    	<router-link tag="li" :to="{name:'Play',params:{id:item.songid}}" v-for="(item,key,index) in songData" :key="index">
    		{{item.songname}}
    	</router-link>
    </ul>
  </div>
</template>

<script>
export default {
	name:"search",
	data(){
		return{
			searchData:"",
			songData:[]
		}
	},
	methods:{
		http(){
			this.$axios.get(this.HOST+"/v1/restserver/ting",{
        		params:{
        			method:"baidu.ting.search.catalogSug",
                    query:this.searchData
        		}
        	}).then(res=>{
              this.songData = res.data.song
        	}).catch(error=>{
        		console.log(error)
        	})
		},
        searchHandler(){
        	this.http()
        },
        keyupHandler(){
        	this.http()
        }
	}
}
</script>

<style lang="css" scoped>
</style>
